<template>
  <div class="content-box-full">
    <ContainerBox>
      <template #header>
        <el-form
          @keyup.enter.native="handleSearch"
          ref="searchFormRef"
          :model="searchForm"
          :rules="searchFormRules"
          label-width="auto"
          inline
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="员工号:" prop="workNo">
                <el-input v-model="searchForm.workNo" type="text" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item required label="薪资范围" prop="salaryRange">
                <el-select
                  class="inline-select"
                  filterable
                  clearable
                  collapse-tags
                  multiple
                  v-model="searchForm.salaryRange"
                  placeholder="薪资范围"
                >
                  <el-option
                    v-for="item in hcmPayGroupEntities"
                    :key="item.id"
                    :value="item.code"
                    :label="item.label"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="在职状态：" prop="dutyStatus">
                <el-select class="inline-select" v-model="searchForm.dutyStatus">
                  <el-option
                    v-for="item in DUTY_STATUS_LIST"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="9">
              <el-form-item label="过账年月:" prop="postingDate">
                <el-date-picker
                  v-model="searchForm.postingDate"
                  type="daterange"
                  unlink-panels
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :shortcuts="shortcuts"
                />
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item>
                <el-button v-prevent-reclick type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="handleExport" v-prevent-reclick>导出</el-button>
                <el-button @click="handleData" v-prevent-reclick>数据处理</el-button>
                <el-button @click="handleLock(true)" v-prevent-reclick>锁定</el-button>
                <el-button @click="handleLock(false)" v-prevent-reclick>取消锁定</el-button>
                <el-button @click="handlePost(true)" v-prevent-reclick>过账</el-button>
                <el-button @click="handlePost(false)" v-prevent-reclick>取消过账</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #default>
        <el-table
          :data="tableData"
          :empty-text="isLoadingTable ? '加载中...' : '暂无数据'"
          class="table-box"
          height="100%"
          stripe
          fit
          border
          highlight-current-row
          @selection-change="selectionchange"
        >
          <el-table-column type="selection" align="center" width="100"></el-table-column>
          <el-table-column label="员工号" align="center" min-width="100" prop="workNo">
          </el-table-column>
          <el-table-column label="员工姓名" align="center" min-width="100" prop="workName">
          </el-table-column>
          <el-table-column label="性别" align="center" min-width="100" prop="gender">
          </el-table-column>
          <el-table-column label="员工组" align="center" min-width="100" prop="employeeNature">
          </el-table-column>
          <el-table-column label="工资范围" align="center" min-width="100" prop="salaryRange">
          </el-table-column>
          <el-table-column label="档案分组" align="center" min-width="100" prop="employeeClass">
          </el-table-column>
          <el-table-column label="部门名称" align="center" min-width="100" prop="employeeNature">
          </el-table-column>
          <el-table-column label="职位名称" align="center" min-width="100" prop="employeeClass">
          </el-table-column>
          <el-table-column label="入职日期" align="center" min-width="100" prop="employeeNature">
          </el-table-column>
          <el-table-column label="离职日期" align="center" min-width="100" prop="employeeClass">
          </el-table-column>
          <el-table-column label="餐费扣款" align="center" min-width="100" prop="employeeNature">
          </el-table-column>
          <el-table-column label="过账年月" align="center" min-width="100" prop="employeeClass">
          </el-table-column>
          <el-table-column label="锁定状态" align="center" min-width="100" prop="employeeNature">
          </el-table-column>
          <el-table-column label="过账状态" align="center" min-width="100" prop="employeeClass">
          </el-table-column>
          <el-table-column label="过账日期" align="center" min-width="100" prop="employeeNature">
          </el-table-column>
          <el-table-column label="过账时间" align="center" min-width="100" prop="employeeClass">
          </el-table-column>
          <el-table-column label="过账信息" align="center" min-width="100" prop="employeeNature">
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <CommonPaging
          :total="tableTotal"
          :current-page="pageNum"
          @currentChange="handleCurrentChange"
          @sizeChange="handleSizeChange"
        ></CommonPaging>
      </template>
    </ContainerBox>
  </div>
</template>
<script setup>
import ContainerBox from '@/components/base/ContainerBox.vue'
import { ref, onMounted, computed } from 'vue'
import CommonPaging from '@/components/base/CommonPaging.vue'
import message from '@/utils/elMessage.js'
import { usePublicStore } from '@/stores/publicInfo.js'
import subsidyManageApi from '@/api/subsidyManageApi.js'
import { DUTY_STATUS_LIST } from '@/utils/systemConfig.js'
import { useDatePicker } from '@/useHook/useDatePicker.js'

const publicStore = usePublicStore()
const { shortcuts, setDefDate } = useDatePicker()

onMounted(() => {
  searchForm.value.postingDate = setDefDate()
  fetchList()
})
const searchFormRef = ref(null)
const searchForm = ref({
  workNo: '', //补贴编号
  salaryRange: [], //工资范围
  dutyStatus: '', //在职状态
  postingDate: [], //过账年月 //年份+月份，一个周期为上月的21日-20日，默认当月
})
const searchFormRules = ref({
  salaryRange: [
    { required: true, message: '薪资范围不可为空', trigger: 'blur' },
    { required: true, message: '薪资范围不可为空', trigger: 'change' },
  ],
})

const hcmPayGroupEntities = computed(() => publicStore.hcmPayGroupEntities)
const pageNum = ref(1)
const pageSize = ref(10)

//查询
function handleSearch() {
  searchFormRef.value.validate((bool) => {
    if (bool) {
      handleCurrentChange(1)
    }
  })
}

//导出
function handleExport() {}

// 处理数据
function handleData() {}

// 锁定
function handleLock(bool) {}

//过账
function handlePost(bool) {}

function selectionchange(selection) {
  console.log(selection, 'selection')
}

function fetchList() {
  isLoadingTable.value = true
  tableData.value = []
  const params = {
    page: pageNum.value,
    limit: pageSize.value,
    workNo: searchForm.value.workNo,
    subsidyName: searchForm.value.subsidyName,
    salaryRanges: searchForm.value.salaryRange.join(','),
  }
  subsidyManageApi
    .fetchList(params)
    .then((res) => {
      if (res.code === 0) {
        const data = res.page || {}
        tableTotal.value = data.totalCount || 0
        tableData.value = data.list || []
      } else {
        message.warning(res.msg)
      }
    })
    .finally(() => {
      isLoadingTable.value = false
    })
}

// 列表数据
const isLoadingTable = ref(false)
const tableData = ref([])
const tableTotal = ref(0)

function handleCurrentChange(val) {
  pageNum.value = val
  fetchList()
}

function handleSizeChange(val) {
  pageNum.value = 1
  pageSize.value = val
  fetchList()
}
</script>

<style scoped lang="scss"></style>
